<template>
  <div>
    <van-tabs class="order-tab" animated swipeable v-model="active">
      <van-tab
          v-for="(value, key) in orderStatus"
          :key="key"
          :name="key"
          :title="value"
      >
        <order-list :status="key"/>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import OrderList from "@/view/order/OrderList";
const orderStatus = {
  all: '全部',
  unpaid: '待付款',
  unActive: '待激活',
  done: '已完成',
  canceled: '已取消'
}
export default {
  name: 'Order',
  components: {OrderList},
  props: ['status'],
  provide: {
    orderStatus: orderStatus
  },
  watch: {
    status(newVal) {
      if (newVal) {
        this.active = newVal
      } else {
        this.active = 'all'
      }
    }
  },
  data() {
    return {
      active: 'all',
      orderStatus: orderStatus
    }
  },
  methods: {
  }
}
</script>

<style lang="less">
  .order{
    &-tab{
      .van-tab__text{
        font-weight: bold;
      }

      .van-tabs__wrap {
        position: fixed;
        top: 0;
        width: 100%;
      }

      .van-tabs__content{
        position: fixed;
        top: 50px;
        bottom: 50px;
        width: 100%;
        overflow-y: auto;
        background-color: #F8F8F8;
        padding-top: 10px;
      }
    }
  }
</style>